<template>
  <div class="content" v-if="foodShow">
    <div class="foodInfo">
      <div class="foodImg">
        <div class="foodIcon" @click="toggleShow">
          <i class="iconfont icon-jiantou3"></i>
        </div>
        <img v-lazy="foodInfo.image" alt="" width="300px" height="300px">
        <div>{{foodInfo.info}}</div>
      </div>
       <div class="foodBase p-3">
         <h4>{{foodInfo.name}}</h4>
         <div class="grey-2 font-xs pt-1">
           <span>{{`月售${foodInfo.sellCount}份`}}</span>
           <span>{{`好评率${foodInfo.rating}%`}}</span>
         </div>
         <div class="display-flex ai-center jc-between">
           <p class="font-xm red-1">{{`￥${foodInfo.price}`}}</p>
           <CartControl :food="foodInfo"/>
         </div>
       </div>
     </div>
    <div class="cover" @click="toggleShow"></div>
  </div>
</template>

<script>
  import CartControl from "../CartControl/CartControl";
  export default {
    name: "Food",
    components:{
      CartControl
    },
    props:{
      foodInfo:Object ,
    },
    data(){
      return {
        foodShow:false
      }
    },
    methods:{
      toggleShow(){
        this.foodShow = !this.foodShow
      }
    }
  }
</script>

<style lang="scss" scoped>
 .content{
   border-radius: 5px;
   .cover{
     position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     background-color: rgba(0,0,0,0.3);
   }
   .foodInfo{
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -200px;
     margin-left: -150px;
     z-index: 2;
     .foodImg{
       div {
         position: absolute;
         bottom: 88px;
         left: 10px;
         color: #fffdef;
         font-size: 10px;
       }
       .foodIcon{
         position: absolute;
         top: 10px;
         left: 10px;
         color: #fff;
         font-weight: 700;
         z-index: 99;
       }
     }
     .foodBase{
       background-color: #fff;
     }
   }
 }
</style>
